<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Model Evaluation Results</title>
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon16.png') }}">
    <link rel="icon" type="image/x-icon" sizes="32x32" href="{{ url_for('static', filename='images/favicon.ico') }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <header class="mt-4 mb-5">
            <h1 class="text-center">Model Evaluation Results</h1>
            <p class="text-center">
                <a href="{{ url_for('index') }}" class="btn btn-outline-primary">← Back to Home</a>
            </p>
        </header>

        <div class="row">
            <!-- Evaluation Results -->
            <div class="col-md-8">
                <div class="card shadow">
                    <div class="card-header bg-info text-white">
                        <h4 class="mb-0">Evaluation Metrics</h4>
                    </div>
                    <div class="card-body">
                        <p>
                            Evaluation completed in {{ "%.2f"|format(evaluation_time) }} seconds
                            using {{ model_params.similarity_method }} similarity with k={{ model_params.k }}.
                        </p>

                        <!-- Metrics Table -->
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Metric</th>
                                        <th>Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Mean Absolute Error (MAE)</td>
                                        <td>{{ "%.4f"|format(metrics.mae) }}</td>
                                    </tr>
                                    <tr>
                                        <td>Root Mean Squared Error (RMSE)</td>
                                        <td>{{ "%.4f"|format(metrics.rmse) }}</td>
                                    </tr>
                                    {% if "precision@5" in metrics %}
                                    <tr>
                                        <td>Precision@5</td>
                                        <td>{{ "%.4f"|format(metrics["precision@5"]) }}</td>
                                    </tr>
                                    {% endif %}
                                    {% if "precision@10" in metrics %}
                                    <tr>
                                        <td>Precision@10</td>
                                        <td>{{ "%.4f"|format(metrics["precision@10"]) }}</td>
                                    </tr>
                                    {% endif %}
                                    {% if "recall@5" in metrics %}
                                    <tr>
                                        <td>Recall@5</td>
                                        <td>{{ "%.4f"|format(metrics["recall@5"]) }}</td>
                                    </tr>
                                    {% endif %}
                                    {% if "recall@10" in metrics %}
                                    <tr>
                                        <td>Recall@10</td>
                                        <td>{{ "%.4f"|format(metrics["recall@10"]) }}</td>
                                    </tr>
                                    {% endif %}
                                    {% if "f1@5" in metrics %}
                                    <tr>
                                        <td>F1 Score@5</td>
                                        <td>{{ "%.4f"|format(metrics["f1@5"]) }}</td>
                                    </tr>
                                    {% endif %}
                                    {% if "f1@10" in metrics %}
                                    <tr>
                                        <td>F1 Score@10</td>
                                        <td>{{ "%.4f"|format(metrics["f1@10"]) }}</td>
                                    </tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>

                        <div class="alert alert-info">
                            <strong>Note:</strong> Lower MAE and RMSE values indicate better prediction accuracy.
                        </div>
                    </div>
                </div>
            </div>

            <!-- Model Configuration -->
            <div class="col-md-4">
                <div class="card shadow">
                    <div class="card-header bg-secondary text-white">
                        <h4 class="mb-0">Model Configuration</h4>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped">
                            <tbody>
                                <tr>
                                    <th>Similarity Method:</th>
                                    <td>{{ model_params.similarity_method|title }}</td>
                                </tr>
                                <tr>
                                    <th>Prediction Method:</th>
                                    <td>{{ model_params.prediction_method|replace('_', ' ')|title }}</td>
                                </tr>
                                <tr>
                                    <th>Number of Similar Users (k):</th>
                                    <td>{{ model_params.k }}</td>
                                </tr>
                                <tr>
                                    <th>Test Size:</th>
                                    <td>{{ model_params.test_size * 100 }}%</td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="mt-4">
                            <h5>Try Different Parameters</h5>
                            <form action="{{ url_for('evaluate_model') }}" method="post">
                                <div class="form-group">
                                    <label for="similarity_method">Similarity Method:</label>
                                    <select class="form-control" id="similarity_method" name="similarity_method">
                                        <option value="cosine" {% if model_params.similarity_method == 'cosine' %}selected{% endif %}>Cosine</option>
                                        <option value="pearson" {% if model_params.similarity_method == 'pearson' %}selected{% endif %}>Pearson</option>
                                        <option value="euclidean" {% if model_params.similarity_method == 'euclidean' %}selected{% endif %}>Euclidean</option>
                                        <option value="adjusted_cosine" {% if model_params.similarity_method == 'adjusted_cosine' %}selected{% endif %}>Adjusted Cosine</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="prediction_method">Prediction Method:</label>
                                    <select class="form-control" id="prediction_method" name="prediction_method">
                                        <option value="simple_weighted" {% if model_params.prediction_method == 'simple_weighted' %}selected{% endif %}>Simple Weighted</option>
                                        <option value="bias_weighted" {% if model_params.prediction_method == 'bias_weighted' %}selected{% endif %}>Bias Weighted</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="k">Number of Similar Users (k):</label>
                                    <input type="number" class="form-control" id="k" name="k" min="1" max="100" value="{{ model_params.k }}">
                                </div>
                                <button type="submit" class="btn btn-info btn-block">Re-evaluate with New Parameters</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="mt-5 mb-3 text-center text-muted">
            <p>&copy; 2025 User-Based Collaborative Filtering Project</p>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>